<template>
	<!-- 店铺详情-支付页面 -->
	<view class="pages-home" v-if="detail.name">
			
		<banner :list="detail.thumbs" :margin="0" :autoplay="true" :height="562" :indicatorActiveColor="primaryColor">
		</banner>
		<!-- <image  src="../../../static/share.png" style="width: 60rpx;height:60rpx;position: absolute;top:20rpx;right:20rpx;"></image> -->
		<view class="fill-base pd-lg">
			<view class="flex-between f-desc c-caption mt-sm">
				<view class="flex-y-baseline flex-1">
					<view class="f-title c-title">{{detail.name}}</view>
				</view>
				<view class="flex-y-baseline flex-center">
					<view>{{detail.sale_nums}}人选择</view>
					<view class="flex-center ml-md" @tap.stop="toNavigation(detail)">
						
						<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
						<view class="f-desc c-title"><text style="font-weight: 800;color:green;">{{detail.shop}}</text>{{detail.distance}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view
			class="list-item flex-center mb-md ml-md mr-md pd-lg fill-base radius-16"
			v-for="(item, index) in goodsList" :key="index">
			
			<image mode="aspectFill" class="cover radius-16" :src="item.thumb"></image>
			
			<view class="flex-1 ml-md" style="max-width: 450rpx;">
				<view class="flex-between">
					<view class="f-title c-title text-bold max-270 ellipsis">{{ item.name || ''  }}</view>
					
					<view class="flex-between" style="width: 250rpx;">
						<view class="f-title c-title image-bg happy_bean" :style="{color: primaryColor}">豆</view>
					</view>
				</view>
				<view class="f-caption c-caption mt-sm mb-sm ellipsis" style="height: 36rpx;">{{ item.text || '' }}
				</view>
				
				<view class="flex-between mt-md">
					<view class="flex-y-center f-desc c-caption max-350 ellipsis">
						<view class="flex-y-baseline text-delete f-icontext c-desc ml-sm">¥{{item.original_price}}</view>
						<view class="flex-y-baseline c-warning ml-sm">¥{{item.present_price }}</view>
					</view>
					<view class="text-center" :style="{color: primaryColor}">¥{{ item.original_price - item.present_price }}</view>
					<view class="flex-warp">
						<button @tap.stop="changeNum(-1,index)" class="reduce"
							:style="{borderColor:primaryColor,color:primaryColor}"><i
								class="iconfont icon-jian-bold"></i></button>
						<button class="addreduce clear-btn">{{item.num || 0}}</button>
						</block>
						<button @tap.stop="changeNum(1,index)" class="reduce"
							:style="{borderColor:primaryColor,color:primaryColor}"><i
								class="iconfont icon-jia-bold"></i></button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="goodsList && goodsList.length > 0">
		
			<view @tap.stop="$util.goUrl({url:`/user/pages/address/list?check=1`})"
				class="address-info flex-warp mt-lg ml-lg mr-lg pd-lg fill-base radius-16"  v-if="detail.shipping_type==1">
				<view class="address-icon flex-center c-base radius"
					:style="{background:`linear-gradient(to right, ${subColor}, ${primaryColor})`}"><i
						class="iconfont iconjuli"></i></view>
				<view class="flex-1 flex-between ml-md">
					<view class="max-500">
						<block v-if="orderInfo.address_info.id">
							<view class="flex-y-baseline username c-title text-bold">
								{{orderInfo.address_info.user_name}}
								<view class="ml-md f-desc c-caption">{{orderInfo.address_info.mobile}}</view>
							</view>
							<view class="f-desc c-title ellipsis">
								{{`${orderInfo.address_info.address} ${orderInfo.address_info.address_info}`}}
							</view>
						</block>
						<block v-else>
							<view class="username c-title text-bold">请选择地址</view>
						</block>
					</view>
					<i class="iconfont icon-right"></i>
				</view>
			</view>
			<view v-else-if="detail.shipping_type==0" class="address-info flex-warp mt-lg ml-lg mr-lg pd-lg fill-base radius-16" >
				 <radio-group @change="radioChange" style="width: 900rpx;">  
				        <label class="radio-item" v-for="(item, index) in radioList" :key="index">  
				          <radio :value="item.value" :checked="item.checked"></radio>  
				          <text>{{ item.label }}</text>  
				        </label>  
				      </radio-group>  
				<view  v-if="selectedValue==1" class="address-icon flex-center c-base radius"
					:style="{background:`linear-gradient(to right, ${subColor}, ${primaryColor})`}"><i
						class="iconfont iconjuli"></i></view>
				<view class="flex-1 flex-between ml-md" v-if="selectedValue==1">
					<view class="max-500">
						<block v-if="orderInfo.address_info.id">
							<view class="flex-y-baseline username c-title text-bold">
								{{orderInfo.address_info.user_name}}
								<view class="ml-md f-desc c-caption">{{orderInfo.address_info.mobile}}</view>
							</view>
							<view class="f-desc c-title ellipsis">
								{{`${orderInfo.address_info.address} ${orderInfo.address_info.address_info}`}}
							</view>
						</block>
						<block v-else>
							<view class="username c-title text-bold">请选择地址</view>
						</block>
					</view>
					<i class="iconfont icon-right"></i>
				</view>
			</view>
			<view v-else class="fill-base mt-md ml-md mr-md radius-16" style="padding: 20rpx;;">
				该商品为 <text style="color:red;">到店自取</text> 商品
			</view>
			<view class="fill-base mt-md ml-md mr-md radius-16">
				<view class="fill-base mt-md radius-16 pl-lg pt-md">
					<view class="item-text">介绍</view>
					<textarea v-model="detail.content" disabled class="item-textarea pd-lg" maxlength="100" />
					<!-- <view class="text-right pb-lg pr-lg">
						{{detail.content.length>100?100:detail.content.length}}/100
					</view> -->
				</view>
			</view>

			<!-- <view class="mt-md ml-lg mr-lg fill-base radius-16">
				<view @tap.stop="$util.goUrl({url:`/user/pages/coupon/use`})"
					class="flex-between pt-lg pb-lg pl-lg pr-md">
					<view class="f-title c-title text-bold">卡券优惠</view>
					<view class="flex-y-center f-paragraph c-caption ml-sm">
						<view class="c-warning mr-sm">
							{{orderInfo.discount ? `-¥${orderInfo.discount}` : `${orderInfo.canUseCoupon}张可用`}}
						</view>
						<i class="iconfont icon-right"></i>
					</view>
				</view>
			</view> -->
		
			<view class="mt-md ml-lg mr-lg pd-lg fill-base radius-16">
				<view class="flex-between pb-lg">
					<view class="flex-y-baseline">
						<view class="f-title c-title text-bold">订单备注</view>
						<view class="f-paragraph c-caption ml-sm">(选填)</view>
					</view>
				</view>
				<view class="f-caption c-caption fill-body radius-16">
					<textarea v-model="form.text" class="item-textarea f-paragraph pd-lg"
						placeholder-class="f-paragraph" maxlength="100" placeholder="输入订单备注" />
					<view class="text-right pb-lg pr-lg">{{form.text.length>100?100:form.text.length}}/100
					</view>
				</view>
			</view>
		
			<view class="mt-md ml-lg mr-lg fill-base radius-16">
				<view @tap.stop="toChangeItem(index,2)" class="flex-between pt-lg pb-lg pl-lg pr-md b-1px-b"
					v-for="(item,index) in payList" :key="index">
					<view class="flex-y-center f-title c-title">
						<i class="iconfont mr-md" :class="item.icon"
							:style="{color:item.id==1?primaryColor:'',fontSize:'50rpx'}"></i>
						{{item.title}}
						<view class="f-paragraph c-caption ml-md" v-if="item.id == 1">余额{{balance || 0}}元</view>
					</view>
					<view class="flex-y-center" :style="{color:payInd == index ? primaryColor:''}">
						<i class="iconfont icon-xuanze mr-sm" :class="[{'icon-xuanze-fill':payInd == index}]"></i>
					</view>
				</view>
			</view>
		
			<view @tap.stop="isAgree=!isAgree"
				class="mt-md ml-lg mr-lg pd-lg fill-base f-paragraph c-title flex-y-center radius-16"
				v-if="configInfo.trading_rules && configInfo.trading_rules.length>0">
				<i class="iconfont mr-sm" :class="isAgree?'icon-xuanze-fill':'icon-xuanze'"
					:style="{color:isAgree?primaryColor:''}"></i>
				我已阅读并同意<view @tap.stop="$refs.show_rule_item.open()" :style="{color:primaryColor}">《平台交易规则》</view>
			</view>
			
			<view class="paydoudou" >
				<view class="betweentext">
					<image style="width:60rpx;height:60rpx;position: relative;top:-17rpx" src="https://b2b.bbi-love.com/static/jindou.png"></image>
					<text>
						幸福豆：{{orderInfo.discount}}</text>
					<text style="color:lightgrey;">(总：{{userInfo.withdraw}})</text>
					<radio  :value="1" :checked="isusedou" @click="nouselegumes" style="position: relative;top:-17rpx"/>
				</view>
			</view>
			
			<view class="pay-info fix flex-between text-right pl-lg pr-lg fill-base">
				<view class="flex-y-center f-paragraph c-title text-bold ml-sm mr-lg" @tap.stop="likeme(detail.id)">
					<view>
						<i 
						class="iconfont mr-sm" 
						:class="[{'iconshoucang1':!detail.is_collect},{'iconshoucang2':detail.is_collect}]"
						></i>
					</view>
					<view :style="{color:detail.is_collect ? 'lightgrey' :'black'}">收藏</view>
				</view>
				<view class="flex-y-center f-paragraph c-title text-bold ml-sm mr-lg" @tap.stop="callphone()">
					<image src="../../../static/kefu.png" style="width:60rpx;height: 60rpx;"></image>
					<view style="color:#8228f9">咨询</view>
				</view>
				<view class="flex-y-center f-paragraph c-title text-bold ml-sm mr-lg">合计：
					<view class="flex-y-baseline f-title c-warning">¥{{orderInfo.pay_price}}</view>
				</view>
				<auth :needAuth="userInfo && !userInfo.mobile" :must="true"
					:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toPay" style="width: 182rpx;">
					<view class="pay-btn flex-center f-paragraph c-base radius" :style="{background:primaryColor}">
						立即支付</view>
				</auth>
			</view>
		
		</view>
		
		<view class="fill-base mt-md ml-md mr-md radius-16">
			<view class="flex-between pl-lg pr-lg pt-md">
				<view class="item-text">展示图</view>
				<input :disabled="true" type="text" class="item-input flex-1" />
			</view>
			<view class="mt-md" style="width: 98%;" v-for="(item, index) in detail.pictures">
				<image mode="widthFix" class="pl-md" style="width: 100%; " :src="item"></image>
			</view>
			<!-- <view class="flex-between pl-lg pr-lg pb-md">
				<upload disabled="true" :imagelist="pictures_photo" filetype="picture"
					imgtype="pictures" text="上传图片" :imgsize="5">
				</upload>
			</view> -->
		</view>
		
<!-- 		<view class="fill-base mt-md ml-md mr-md radius-16">
			<view class="fill-base mt-md radius-16 pl-lg pt-md">
				<view class="item-text">禁忌说明</view>
				<textarea v-model="detail.taboo" disabled class="item-textarea pd-lg" maxlength="100" /> -->
				<!-- <view class="text-right pb-lg pr-lg">
					{{detail.taboo.length>100?100:detail.taboo.length}}/100
				</view> -->
<!-- 			</view>
		</view> -->
		<view class="fill-base mt-md ml-md mr-md radius-16" style="padding-bottom: 150rpx;">
			<view class="fill-base mt-md radius-16 pl-lg pt-md">
				<view v-if="detail.needtoknow != ''" class="item-text">下单须知</view>
				<textarea v-if="detail.needtoknow != ''" v-model="detail.needtoknow" disabled class="item-textarea pd-lg" maxlength="100" />
				<!-- <view class="text-right pb-lg pr-lg">
					{{detail.needtoknow.length>100?100:detail.needtoknow.length}}/100
				</view> -->
			</view>
		</view>
		
		<uni-popup ref="show_rule_item" type="center" :maskClick="false">
			<view class="popup-rule">
				<view class="fill-base pd-lg radius-26">
					<view class="f-title c-title text-bold flex-center pd-lg">平台交易规则</view>
					<scroll-view scroll-y @touchmove.stop.prevent class="rule-text">
						<parser :html="configInfo.trading_rules" show-with-animation lazy-load>
							加载中...
						</parser>
					</scroll-view>
				</view>
				<view @tap="$refs.show_rule_item.close()" class="flex-center pd-lg"><i
						class="iconfont icon-close c-base"></i></view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js'
	import $api from '@/api/index.js'
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				options: {},
				activeIndex: 0,
				tabList: [{
					title: '项目介绍',
					id: 0,
				}, {
					title: '禁忌说明',
					id: 1,
				}, {
					title: '下单须知',
					id: 2
				}],
				goodsList: [], // 项目列表
				rule: {
					0: 'introduce',
					1: 'explain',
					2: 'notice'
				},
				detail: {},
				payList: [
					{
						id: 0,
						icon: 'iconweixinzhifu1 c-success',
						title: '微信支付'
					},
				],
				payInd: 0,
				options: {},
				balance: 0,
				orderInfo: {
					coupon_id: 0,
					address_info: {
						id: 0
					},
					coach_id: 0
				},
				form: {
					text: ''
				},
				lockTap: false,
				isusedou:true,
				isAgree: true,
				pid:0,
				 radioList: [  
				        { label: '快递发货', value: '1', checked: true },  
				        { label: '到店自取', value: '2', checked:false   },  
				      ],  
					  selectedValue:1,
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			if(options.pid){
				this.pid = options.pid
				if(this.userInfo.id != options.pid){
					this.bindpid(options.pid)
				}
			}
			this.initIndex()
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onShareAppMessage: function () {  
		    return {  
		      title: '伴伴享购分享', // 分享标题  
		      path: "/user/pages/shop/goods-detail-pay?id="+this.detail.id+"&pid="+this.userInfo.id, // 分享链接，可以带参数  
		      imageUrl: this.detail.thumb, // 分享图标  
		      success: function () {  
		        // 用户确认分享后执行的回调函数  
		        console.log('分享成功');  
		      },  
		      fail: function () {  
		        // 分享失败的回调函数  
		        console.log('分享失败');  
		      }  
		    };  
		  },
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo']),
			...mapMutations(['getUserIndex']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				await this.getDetail()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			async getDetail() {
				let {
					id
				} = this.options
				let detail = await this.$api.service.freeDetails({
					id
				});
				detail.num = 1
				this.detail = detail
				
				this.goodsList = [detail]
				this.$util.hideAll()
				
				this.initOrder()
			},
			async bindpid(pid)
			{
				let param={
					pid:pid
				}
				await this.$api.user.bindsuperior(param)
			},
			async initOrder() {
				var ser_id = 0
				var num = 0
				ser_id = this.goodsList[this.goodsList.length - 1].id
				num = this.goodsList[this.goodsList.length - 1].num
				
				let {
					coupon_id,
					address_info
				} = this.orderInfo
				let {
					id: address_id
				} = address_info
				if (!address_id) {
					let address_info = await this.$api.mine.getDefultAddress()
					address_id = address_info && address_info.id ? address_info.id : null
				}
				let [data, mineInfo] = await Promise.all([this.$api.service.freeOrderInfo({
					goods_id: ser_id,
					num: num,
					coupon_id,
					address_id
				}), this.getMineInfo()])
				// debugger
				data.address_info = data.address_info.id ? data.address_info : {},
				this.orderInfo = data
				if(data.discount > this.userInfo.withdraw)
				{
					uni.showToast({
						title:'您的幸福豆不足'
					})
				}
				var balance = 0
				this.balance = balance
			},
			initRefresh() {
				this.initIndex(true)
			},
			handerTabChange(index) {
				this.activeIndex = index;
			},
			callphone()
			{
				uni.makePhoneCall({
					phoneNumber:this.detail.phone
				})
			},
			async likeme(gid)
			{
				let param = {
					cid: gid,
					type:4
				}
				let data = await $api.user.collectanything(param)
			},
		
			// 加/减数量
			async changeNum(mol, index) {
				let item = this.goodsList[index]
				
				if (this.lockTap) return;
				this.lockTap = true;
				if(mol > 0){
					item.num += 1
				} else if(item.num > 1){
					item.num -= 1
				} else {
					item.num = 1
				}
				try {
					await this.initOrder()
					this.lockTap = false
				} catch (e) {
					this.lockTap = false
				}
			},
			async toPay() {
				let {
					coupon_id = 0,
					address_info = {}
				} = this.orderInfo
				let {
					id: address_id
				} = address_info
				if (!address_id) {
					this.$util.showToast({
						title: `请选择地址`
					})
					return
				}
				let {
					payList,
					payInd,
				} = this
				let {
					trading_rules
				} = this.configInfo
				if (trading_rules && trading_rules.length > 0 && !this.isAgree) {
					this.$util.showToast({
						title: `请先阅读并同意《平台交易规则》`
					})
					return
				}
		
				var ser_id = 0
				var num = 0
				ser_id = this.goodsList[this.goodsList.length - 1].id
				num = this.goodsList[this.goodsList.length - 1].num
				let param = {
					goods_id: ser_id,
					address_id: address_info.id,
					num: num,
					coupon_id: 0,
					text: this.form.text,
					pid:this.pid,
					shipping_type:this.selectedValue
				}
				// debugger
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					let {
						pay_list
					} = await this.$api.order.freePayOrder(param)
					
					this.$util.hideAll()
					if (pay_list) {
						console.log(pay_list)
						try {
							let result = await this.$util.pay(pay_list)
							console.log(result)
							this.$util.showToast({
								title: `支付成功`
							})
							setTimeout(() => {
								this.$util.goUrl({
									url: '/pages/order?tab=2',
									openType: `reLaunch`
								})
							}, 1000)
							this.lockTap = false
							return
						} catch (e) {
							this.$util.showToast({
								title: `支付失败`
							})
							setTimeout(() => {
								this.$util.goUrl({
									url: '/pages/order?tab=1',
									openType: `reLaunch`
								})
							}, 1000)
							this.lockTap = false
							return
						}
					}
					this.$util.showToast({
						title: `支付成功`
					})
					setTimeout(() => {
						this.$util.goUrl({
							url: '/pages/order?tab=2',
							openType: `reLaunch`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
		nouselegumes()
		{
			this.isusedou = !this.isusedou
			if(this.isusedou ==false)
			{
				uni.showToast({
					
					title:'需要支付对应金额的幸福豆才能购买会员'
				})
			}
		},
			//导航--传终点的坐标即可
			toNavigation(item) {
				debugger
				//根据终点地址调起地图导航
				uni.openLocation({
					longitude: parseFloat(item.lng),// 经度，范围为-180~180，负数表示西经
					latitude: parseFloat(item.lat),// 纬度，范围为-90~90，负数表示南纬
					scale: 28, // 缩放比例
					name:item.name,//终点名称
					address:item.address,//终点详细地址
					success: function (res) {
						console.log('success:',res);
					}
				});
			},
			 radioChange(e) {  
			      this.selectedValue = e.detail.value;  
				  console.log(this.selectedValue)
			    }, 
			
		},
	}
</script>

<style lang="scss">
	.pages-home {
		.list-item {
			.item-btn {
				width: 129rpx;
				height: 54rpx;
			}
		}
	}
	.list-item {
		background-color: #ffffff;
		.cover {
			width: 180rpx;
			height: 180rpx;
		}
		
		.text {
			width: 75rpx;
			height: 75rpx;
		}
		
		.image-bg {
			width: 55rpx;
			height: 55rpx;
			font-weight: 600;
			padding-top: 0rpx;
			text-align: center;
			background-position: center;
			background-size:cover;
			background-repeat: no-repeat;
			background-image: url("/static/common/avoid.png");
			opacity: 0.6;
		}
	
		.time-long {
			min-width: 72rpx;
			height: 30rpx;
			padding: 0 5rpx;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			border-radius: 4rpx;
			font-size: 20rpx;
			color: #FFEEB9;
			margin-right: 16rpx;
		}
	
		.f-icontext {
			font-size: 18rpx;
		}
	
		.text-delete {
			font-size: 20rpx;
			color: #B9B9B9;
		}
	
		.item-btn {
			width: 130rpx;
			height: 52rpx;
			border-radius: 8rpx;
		}
		
		.item-img {
			width: 140rpx;
			height: 140rpx;
			background: #f4f6f8;
		}
			
		.ellipsis {
			max-width: 466rpx;
		}
			
		.item-tag {
			width: 100rpx;
			height: 36rpx;
			margin-top: -18rpx;
		}
			
		.iconyduixingxingshixin {
			font-size: 28rpx;
		}
	}
	
	.item-textarea {
		width: 570rpx;
		height: 120rpx;
	}
	
	.list-item2 {
		.item-img {
			width: 140rpx;
			height: 140rpx;
			background: #f4f6f8;
		}
	
		.ellipsis {
			max-width: 466rpx;
		}
	
		.item-tag {
			width: 100rpx;
			height: 36rpx;
			margin-top: -18rpx;
		}
	
		.iconyduixingxingshixin {
			font-size: 28rpx;
		}
	
		.item-btn {
			width: 129rpx;
			height: 54rpx;
		}
	}
	
	.pay-info {
		height: 110rpx;
		bottom: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.pay-btn {
			width: 182rpx;
			height: 74rpx;
		}
	}

	.popup-rule {
		width: 680rpx;
		height: auto;

		.rule-text {
			min-height: 300rpx;
			max-height: 60vh;
		}

		.iconfont {
			font-size: 60rpx;
		}
	}

.paydoudou{
			   position: fixed;
			   bottom: 50px; 
			   width: 100%; 
			   height:50px;
			   padding:10px;
			   	z-index: 999;		
			   background-color: #fff;
	}
	.betweentext{
			  display: flex;
			  justify-content: space-between;
			  padding: 10px;
	}
	.radio-group {  
	  display: flex;  
	  flex-direction: column;  
	  margin-bottom: 20px;  
	  
	}  
	  
	.radio-item {  
	  display: flex;  
	  align-items: center;  
	  margin-bottom: 10px;  
	}  
	  
	.radio-item radio {  
	  margin-right: 10px;  
	}  
	 
</style>
